<script setup>
import {ref,defineProps} from "vue"

const miniDetail1 = ref(null)

const props = defineProps({
    imageUrl:{type:String},
    detail:{type:String},
    linkUrl:{type:String},
})

const goToLink = () => {
    window.location.href = props.linkUrl
}

const mouseEnter = () => {
    miniDetail1.value.style.opacity = 1
    miniDetail1.value.style.transform = 'translateY(-155px)'
}
const mouseLeave = () => {
    miniDetail1.value.style.opacity = 0
    miniDetail1.value.style.transform = 'translateY(0)'
}
</script>

<template>
    <div class="miniTuiJianBox">
            <div class="miniImage" @mouseenter="mouseEnter(1)" @mouseleave="mouseLeave">
                <img :src="props.imageUrl" alt="">
            </div>
            <div class="detail" ref="miniDetail1"  @mouseenter="mouseEnter(1)" @mouseleave="mouseLeave" @click="goToLink()">
                <span class="text">{{ props.detail }}</span>
            </div>
        </div>
</template>

<style scoped>
.miniTuiJianBox{
    margin-left: 20px;
    margin-right: 20px;
    width: 350px;
    height: 80%;
    border-radius: 10px;
}
.miniImage{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.miniImage img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    z-index: 1;
}
.detail{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
    opacity:0;
    transform: translateY(0);
    border-radius: 10px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text{
    color: #fff;
}
</style>